import BaseComponent from "../../app/baseComponent";
import { createSubpageComponent } from "../page.component";

class UiExampleUtilities extends BaseComponent {
    constructor(name) {
        super(name);
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
<div>
<h5>text family</h5>
<hr>
<div>"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif</div>
<div class="app-aui-textfamily">测试字体 ABCD abcd</div>
<div class="app-reset-textfamily">测试字体 ABCD abcd</div>
</div>
<div>
<h5>text size</h5>
<hr>
<div class="aui-fontsize-elg">aui-fontsize-elg</div>
<div class="aui-fontsize-lg">aui-fontsize-lg</div>
<div class="aui-fontsize-md">aui-fontsize-md</div>
<div class="aui-fontsize-sm">aui-fontsize-sm</div>
<div class="aui-fontsize-xs">aui-fontsize-xs</div>
<div class="aui-fontsize-exs">aui-fontsize-exs</div>
</div>
<div>
<h5>text color</h5>
<hr>
<div class="aui-color-primary">aui-color-primary</div>
<div class="aui-color-info">aui-color-info</div>
<div class="aui-color-success">aui-color-success</div>
<div class="aui-color-warning">aui-color-warning</div>
<div class="aui-color-danger">aui-color-danger</div>
<div class="aui-color-muted">aui-color-muted</div>
</div>
<div>
<h5>text transform</h5>
<hr>
<div class="aui-text-transform-uppercase">aui-text-transform-uppercase</div>
<div class="aui-text-transform-capitalize">aui-text-transform-capitalize</div>
<div class="aui-text-transform-lowercase">aui-text-transform-lowercase</div>
</div>
</div>`;
    }
    _mounted() {
        var self = this;
    }
    _data() {
        var ret = {};
        return ret;
    }
}

window.AUICustomComponents.define("ui-example-utilities", UiExampleUtilities);

export default createSubpageComponent(
    `<ui-example-utilities></ui-example-utilities>`
);